<template>
  <view class="article-content">
    <u--form
      labelPosition="left"
      :model="model"
      :rules="rules"
      :labelWidth="80"
      labelAlign="right"
      ref="formRefs"
    >
      <u-form-item label="头像" prop="info.avatar" borderBottom required ref="item1">
        <view style="text-align: right" v-if="model.info.avatarUrl">
          <image :src="model.info.avatarUrl" style="width: 100rpx; height: 100rpx"></image>
        </view>
        <view style="text-align: right; display: flex; justify-content: flex-end" v-else>
          <view>
            <u-button
              type="primary"
              size="mini"
              openType="chooseAvatar"
              @chooseavatar="chooseavatar"
              text="获取头像"
            ></u-button>
          </view>
        </view>
      </u-form-item>
      <u-form-item label="昵称" prop="info.nickName" borderBottom required>
        <u--input
          v-model="model.info.nickName"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item label="学校名称" prop="info.schoolName" borderBottom required ref="item1">
        <u--input
          v-model="model.info.schoolName"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item label="班级" prop="info.className" borderBottom required ref="item1">
        <u--input
          v-model="model.info.className"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item label="真实姓名" prop="info.userName" borderBottom required ref="item1">
        <u--input
          v-model="model.info.userName"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
        label="性别"
        prop="info.sex"
        borderBottom
        required
        @click="showSex = true"
      >
        <u--input
          v-model="model.info.sexName"
          disabled
          inputAlign="right"
          disabledColor="#ffffff"
          placeholder="请选择性别"
          border="none"
        ></u--input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item label="手机号" prop="info.telephone" borderBottom required ref="item1">
        <u--input
          v-model="model.info.telephone"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item label="身份证号码" prop="info.idCard" borderBottom required ref="item1">
        <u--input
          v-model="model.info.idCard"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
    </u--form>
    <view class="confirm-btn">
      <u-button color="#fc7110" text="注册" @click="submit"></u-button>
    </view>
    <u-action-sheet
      :show="showSex"
      :actions="actionsSex"
      title="请选择性别"
      @close="showSex = false"
      @select="sexSelect"
    ></u-action-sheet>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
import { register } from '@/api/user'
import { fileUpload } from '@/api/upload'
export default {
  data() {
    return {
      showSex: false,
      showOldPassword: false,
      showPassword: false,
      actionsSex: [
        {
          name: '男',
          value: '0'
        },
        {
          name: '女',
          value: '1'
        }
      ],
      model: {
        info: {
          avatarUrl: '',
          nickName: '',
          sex: '',
          sexName: ''
        }
      },
      rules: {
        'info.schoolName': {
          type: 'string',
          required: true,
          message: '请输入学校名称',
          trigger: ['blur', 'change']
        },
        'info.className': {
          type: 'string',
          required: true,
          message: '请输入班级',
          trigger: ['blur', 'change']
        },
        'info.userName': {
          type: 'string',
          required: true,
          message: '请输入真实姓名',
          trigger: ['blur', 'change']
        },
        'info.nickName': {
          type: 'string',
          required: true,
          message: '请输入昵称',
          trigger: ['blur', 'change']
        },
        'info.sex': {
          type: 'string',
          required: true,
          message: '请输入性别',
          trigger: ['blur', 'change']
        },
        'info.telephone': [
          {
            type: 'string',
            required: true,
            message: '请输入电话号码',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的电话号码'
          }
        ],
        'info.idCard': [
          {
            type: 'string',
            required: true,
            message: '请输入身份证',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  onLoad() {
    uni.getUserProfile({
      success: (info) => {
        console.log(info)
      }
    })
  },
  methods: {
    uploadFilePromise({ url, type, name }) {
      return new Promise((resolve, reject) => {
        const files = {
          filePath: url,
          name: 'file'
        }
        fileUpload(files).then((res) => {
          if (res.code === 200) {
            let url = res.data
            resolve(url)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
              duration: 3000
            })
          }
        })
      })
    },
    sexSelect(e) {
			this.model.info.sex = e.value
      this.model.info.sexName = e.name
		},
    async chooseavatar(e) {
      if (e.detail.avatarUrl) {
        const { url } = await this.uploadFilePromise({ url: e.detail.avatarUrl })
        if (url) {
          this.model.info.avatarUrl = url
        }
      }
    },
    submit() {
      this.$refs.formRefs.validate().then((res) => {
        const { info } = this.model
        const resetParams = { ...info }
        uni.showLoading()
        uni.login({
          provider: 'weixin', //使用微信登录
          success: (loginRes) => {
            resetParams.openId = loginRes.code
            register(resetParams)
              .then((res) => {
                uni.hideLoading()
                this.$refs.uToast.show({
                  type: 'default',
                  message: res.msg || '操作成功',
                  duration: 3000,
                  complete: () => {
                    if (res.code === 200) {
                      this.$store.dispatch('getUserInfo').then(c => {
                        uni.navigateBack()
                      }).catch(() => {
                        uni.navigateBack()
                      })
                    }
                  }
                })
              })
              .catch(() => {
                uni.hideLoading()
              })
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.article-content {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 0 20rpx;
  .confirm-btn {
    padding: 20rpx;
  }
}
.uni-input {
  border: 0;
  width: 100%;
}
/deep/ .u-form-item__body {
  padding-right: 20rpx;
  padding-left: 20rpx;
}
</style>
